<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* 
        盒子模型：将所有标签看做一个盒子 从而产生一些属性
        其中包含：内容区Content 填充padding  边框border 外边距margin
        1.内容区
        表示的是盒子存放内容的大小通常由宽度与高度决定

        2.填充（内边距）padding
        除了内容区以外其他的样式都开始由四个方向上的值 top right bottom left
        填充指的是内容与到边框之间的距离(泡沫) 内边距的大小会影响盒子的大小

        3.边框 border
        盒子的外边距 也就是盒子的最外层
        4.外边距 margin
        */
        .box {
            /* 设置内容区大小 */
            width: 100px;
            height: 100px;
            background-color: red;

            /* 设置边框 
           设置边框需要设置三种样式  
           边框颜色  边框宽度 边框样式
            */
            /* 不指定方向表示四个方向都是一个值 */
            /* border-color: yellow;
            border-width: 10px;
            border-style: solid; */

            /* 指定某个方向 */
            /* border-top-color: pink;
            border-top-width: 10px;
            border-top-style: solid;

            border-right-color: rgb(10, 13, 195);
            border-right-width: 10px;
            border-right-style: double;


            border-bottom-color: yellowgreen;
            border-bottom-width: 10px;
            border-bottom-style: dotted;

            border-left-color: yellow;
            border-left-width: 10px;
            border-left-style: dashed; */

            /* 边框简写 */
            /* 四个方向都一样 */
            border: 5px green solid;
            /* 简写设置某一个方向 */
            /* border-top: 5px green solid;
            border-bottom: 5px yellow solid; */

            /*设置内填充 */
            /* 四个方向 两个方向就能影响内容的位置 */
            /* padding-top: 20px;
            padding-left: 20px; */
            /* 本来内容在左边  设置的时候遵循一个元素 如果填充的值>原来的空白则会生效 小于则还是原来的空白 */
            /* padding-right: 30px;
            padding-bottom: 50px; */

            /* 内边距简写 */
            /* padding: 10px;四个方向的内边距都是这个值 */
            /* padding: 50px 60px;上下    左右 */
            /* padding: 10px 20px 30px;上    左右    下 */
            padding: 10px 20px 30px 40px;
            /*  上  右  下  左 */


            /* 外边距 用法和padding一样  与padding不一样的是
                padding影响的是内容的位置  而margin影响的是盒子的位置 或者其他盒子的位置
            */
            /* margin-top: 50px;
            margin-left: 100px; */

            /* 简写 */
            /* margin: 10px 20px 30px 40px; */
            /* margin特殊用法 当设置为auto时会自动平分两边间距 */


            /* 设置左右auto时可以实现标签居中效果 垂直方向不能直接设置 */
            margin: 0px auto;

            /* 总结：布局就是使用功能盒子模型的属性来控制标签的位置 */

        }
    </style>
</head>

<body>
    <div class="box">我是内容</div>
    <div style="width: 50px; height: 50px; background-color: yellow;"></div>
</body>

</html>